<template>
  <div>
    <h1>日常报销申请</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="department">部门:</label>
        <input type="text" id="department" v-model="form.department" required />
      </div>
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="form.name" required />
      </div>
      <div>
        <label for="reason">报销事由:</label>
        <input type="text" id="reason" v-model="form.reason" required />
      </div>
      <div>
        <label for="amount">报销金额:</label>
        <input type="text" id="amount" v-model="form.amount" required />
      </div>
      <div>
        <label for="receipts">上传票据:</label>
        <input type="file" id="receipts" @change="handleFileUpload" multiple />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  department: '',
  name: '',
  reason: '',
  amount: '',
  receipts: []
});

const handleFileUpload = (event) => {
  form.value.receipts = Array.from(event.target.files);
};

const submitForm = async () => {
  console.log('Form submitted:', form.value);
  // 这里添加逻辑来提交表单数据
};
</script>

<style scoped>
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

input[type="text"],
input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="file"] {
  padding: 8px;
}

button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

/* 优化输入框和按钮的焦点样式 */
input:focus,
button:focus {
  outline: 2px solid #0056b3;
}

/* 调整文件输入按钮的样式 */
input[type="file"]::file-selector-button {
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  padding: 5px 15px;
  margin-left: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #e0e0e0;
}
</style>